<template>
  <view class="expert-container">
    <view class="expert-header">
      <text class="title">专家风采</text>
      <text class="subtitle">EXPERT STYLE</text>
    </view>
    
    <!-- 轮播广告 -->
    <view class="banner-wrapper">
      <ad-banner></ad-banner>
    </view>
    
    <view class="expert-content">
      <view class="expert-item">
        <image class="avatar" src="/static/expert-default.png" mode="aspectFill"></image>
        <view class="info">
          <text class="name">张教授</text>
          <text class="title">主任医师 | 博士生导师</text>
          <text class="org">安徽医科大学第二附属医院</text>
          <text class="desc">从事护理管理工作30余年，在护理管理领域具有丰富经验...</text>
        </view>
      </view>
      
      <view class="expert-item">
        <image class="avatar" src="/static/expert-default.png" mode="aspectFill"></image>
        <view class="info">
          <text class="name">李主任</text>
          <text class="title">副主任医师 | 硕士生导师</text>
          <text class="org">北京协和医院</text>
          <text class="desc">专注于护理质量管理研究，发表多篇高质量学术论文...</text>
        </view>
      </view>
      
      <view class="expert-item">
        <image class="avatar" src="/static/expert-default.png" mode="aspectFill"></image>
        <view class="info">
          <text class="name">王教授</text>
          <text class="title">护理学博士 | 教授</text>
          <text class="org">复旦大学护理学院</text>
          <text class="desc">主要研究方向为护理教育与护理管理，主持多项国家级研究项目...</text>
        </view>
      </view>
      
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import AdBanner from '@/components/AdBanner.vue';
// 后续可添加更多功能
</script>

<style lang="scss">
.expert-container {
  min-height: 100vh;
  background-color: #e6f1fc;
  position: relative;
  overflow: hidden;
  
  .expert-header {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    padding: 40rpx 32rpx;
    
    .title {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20rpx;
      display: block;
      letter-spacing: 2rpx;
    }
  }
  
  .expert-content {
    padding: 24rpx;
    position: relative;
    
    .expert-item {
      background: #ffffff;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      display: flex;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 2;
      
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        margin-right: 24rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 32rpx;
          color: #333;
          font-weight: 600;
          display: block;
          margin-bottom: 12rpx;
        }
        
        .title {
          font-size: 26rpx;
          color: #00866a;
          display: block;
          margin-bottom: 8rpx;
        }
        
        .org {
          font-size: 26rpx;
          color: #666;
          display: block;
          margin-bottom: 16rpx;
        }
        
        .desc {
          font-size: 26rpx;
          color: #999;
          line-height: 1.6;
        }
      }
    }
    
    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      z-index: 1;
      
      &.circle-1 {
        width: 300rpx;
        height: 300rpx;
        background: rgba(0, 134, 106, 0.05);
        top: -120rpx;
        right: -100rpx;
      }
      
      &.circle-2 {
        width: 200rpx;
        height: 200rpx;
        background: rgba(30, 136, 229, 0.05);
        bottom: 80rpx;
        left: -80rpx;
      }
      
      &.circle-3 {
        width: 160rpx;
        height: 160rpx;
        background: rgba(0, 134, 106, 0.08);
        bottom: 200rpx;
        right: -60rpx;
      }
    }
  }

  // 添加轮播广告容器样式
  .banner-wrapper {
    padding: 16rpx 24rpx;
    margin-bottom: 10rpx;
  }
}
</style> 